<style lang="less" scoped>
.role-management {
  width: 100%;
  height: 100%;
  .form-box {
    /deep/.el-form-item {
      margin-bottom: 0;
    }
  }
  /deep/.el-table__inner-wrapper {
    height: 100% !important;
  }
  &_box {
    margin-top: 8px;
    height: ~"calc(100% - 60px)";
  }
  .box-card {
    height: 100%;
    /deep/.el-card__body {
      height: calc(100% - 58px);
      box-sizing: border-box;
      overflow: auto;
    }
  }
  .box-col {
    height: 100%;
  }
}
</style>

<template>
  <div class="role-management">
    <!-- <div style="width: 100%; text-align: right">
      <el-button type="primary" @click="addRole"><el-icon><Plus /></el-icon>新增机构</el-button>
    </div> -->
    <el-form :model="ruleform" inline class="form-css form-box">
      <el-form-item label="项目点名称：">
        <el-select v-model="ruleform.insname" filterable placeholder="">
          <el-option v-for="(item, index) in projectList" :key="index" :label="item.insname" :value="item.insname" />
        </el-select>
        <!-- <el-input v-model="ruleform.insname" placeholder="请输入项目点名称" style="width: 200px;"></el-input> -->
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="search"
          ><el-icon style="margin-right: 6px"><Search /></el-icon>
          搜索</el-button
        >
        <el-button @click="reset"
          ><el-icon style="margin-right: 6px"><Refresh /></el-icon>
          重置</el-button
        >
        <el-button type="primary" @click="addRole"
          ><el-icon><Plus /></el-icon>新增机构</el-button
        >
      </el-form-item>
    </el-form>
    <div v-loading="loading" class="role-management_box">
      <el-row :gutter="10" style="height: 100%">
        <el-col :span="12" class="box-col">
          <el-card class="box-card" >
            <template #header>
              <span>所有项目点</span>
            </template>
            <div class="text item">
              <el-tree
                :props="props"
                :data="treeData"
                :default-expand-all="true"
                @node-click="handleNodeClick"
              />
            </div>
          </el-card>
        </el-col>
        <el-col :span="12" class="box-col">
          <el-card class="box-card">
            <template #header>
              <span>项目点详情</span>
            </template>
            <el-form
              ref="hosForm"
              :model="hospitalInfo"
              :rules="hosRules"
              label-width="120px"
              class="hos-info"
            >
              <el-form-item label="机构名称" prop="hospitalName">
                <!-- <el-input v-model="hospitalInfo.hospitalName" style="width: 200px;" /> -->
                {{ hospitalInfo.insname }}
              </el-form-item>
              <el-form-item label="医院编码：" prop="hospitalCode">
                {{ hospitalInfo.inscode }}
              </el-form-item>
              <!-- <el-form-item label="联系方式：" prop="tel">
                <el-input v-model="hospitalInfo.instel" style="width: 200px" />
              </el-form-item>
              <el-form-item label="详细地址：" prop="address">
                <el-input v-model="hospitalInfo.insaddr" style="width: 200px" />
              </el-form-item> -->
              <el-form-item>
                <el-button
                  style="background: red; color: #fff; border: none"
                  @click="deleteHos('hosForm')"
                  >删除</el-button
                >
                <el-button
                  v-show="false"
                  style="background: #1f73b2; color: #fff; border: none"
                  @click="save('hosForm')"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      v-model="roleVisible"
      width="600px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <template #title>
        <span>{{ "新增机构" }}</span>
      </template>
      <el-form
        ref="hosForm"
        :model="hospitalForm"
        :rules="hosRules"
        label-width="150px"
        class="hos-info"
      >
        <el-form-item label="上级机构：" prop="hospitalName">
          {{ hospitalForm.upHospital }}
        </el-form-item>
        <el-form-item label="机构名称：" prop="hospitalName">
          <el-input v-model="hospitalForm.hospitalName" style="width: 200px" />
        </el-form-item>
        <el-form-item label="医院编码：" prop="hospitalCode">
          <el-input v-model="hospitalForm.hospitalCode" style="width: 200px" />
        </el-form-item>
        <el-form-item label="指定报告审核机构：" prop="hospitalCode">
          <el-cascader
            ref="hosAudit"
            v-model="hospitalForm.fatherAudit"
            :props="hosProps"
            filterable
          />
        </el-form-item>
        <!-- <el-form-item label="联系方式：" prop="tel">
          <el-input v-model="hospitalForm.tel" style="width: 200px" />
        </el-form-item>
        <el-form-item label="详细地址：" prop="address">
          <el-input v-model="hospitalForm.address" style="width: 200px" />
        </el-form-item> -->
        <el-form-item v-show="isSave">
          <el-button
            style="background: #1f73b2; color: #fff; border: none"
            @click="save('hosForm')"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="" @click="roleVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSubIns,
  getSubInsAudit,
  getAllSubIns,
  AddInsWeb,
  deleteIns,
} from "@/apis/hospitalManagement";
import { ElMessage, ElMessageBox } from "element-plus";
import format from "@/utils/format";
export default {
  data() {
    let _this = this;
    return {
      projectList: [],
      insProps: {
        lazy: true,
        checkStrictly: true,
        label: "insname",
        value: "inscode",
        lazyLoad(node, resolve) {
          _this.getInsJunior(node, resolve);
        },
      },
      loading: false,
      ruleform: {
        insname: "",
      },
      tableData: [],
      roleVisible: false,
      patientCode: "",
      hospitalInfo: {
        ctime: "",
        gwins: "",
        insaddr: null,
        inscode: "",
        insid: "",
        insinfo: null,
        insl1: null,
        insl2: null,
        insl3: "",
        insl4: "",
        insl5: "",
        insl6: "",
        insname: "",
        instel: null,
        instype: "",
        ipflt: null,
        lid: "",
        reqtime: null,
        uname: null,
        unsamp: "",
        upres: null,
        uptype: "",
        upurl: "",
        utel: null,
      },
      hospitalForm: {
        upHospital: "",
        hospitalName: "",
        hospitalCode: "",
        fatherAudit: "",
        tel: "",
        address: "",
      },
      hosProps: {
        lazy: true,
        checkStrictly: true,
        label: "insname",
        value: "insname",
        lazyLoad(node, resolve) {
          _this.getJunior(node, resolve);
        },
      },
      treeData: [],
      props: {
        label: "labelText",
        children: "children",
      },
      roleForm: {
        roleNum: "",
        roleName: "",
        roleType: "",
        projectScope: "",
      },
      TypeList: [],
      scopeList: [],
      pageList: {
        current: 1,
        size: 20,
        total: 0,
      },
    };
  },
  mounted() {
    this.getJunior()
    this.getHospital();
  },
  methods: {
    search() {
      this.getHospital();
    },
    reset() {
      this.ruleform.insname = "";
      console.log(this.$refs.insname.cascaderPanelRef.clearCheckedNodes());
      this.getHospital();
    },
    getInsJunior(node, resolve) {
      let subins = "";
      if (node.value) {
        subins = node.value;
      }
      getSubIns({
        uname: this.$store.getters.name,
        inscode: this.$store.getters.inscode,
        subins: subins,
      }).then((res) => {
        if (res.code == 0) {
          if (res.data && res.data.length > 0) {
            resolve(res.data);
          } else {
            resolve([]);
          }
        } else {
          resolve([]);
        }
      });
    },
    getJunior() {
      this.projectList = []
      getAllSubIns({
        uname: this.$store.getters.name,
        inscode: this.$store.getters.inscode,
        subins: '',
      }).then((res) => {
        if (res.code == 0) {
          if (res.data && res.data.length > 0) {
            this.projectList = res.data
          }
        }
      });
    },
    getHospital() {
      this.loading = true;
      this.hospitalForm.upHospital = this.$store.getters.insname;
      this.patientCode = this.$store.getters.inscode;
      this.treeData = [];
      this.hospitalInfo = {
        ctime: "",
        gwins: "",
        insaddr: null,
        inscode: "",
        insid: "",
        insinfo: null,
        insl1: null,
        insl2: null,
        insl3: "",
        insl4: "",
        insl5: "",
        insl6: "",
        insname: "",
        instel: null,
        instype: "",
        ipflt: null,
        lid: "",
        reqtime: null,
        uname: null,
        unsamp: "",
        upres: null,
        uptype: "",
        upurl: "",
        utel: null,
      };
      getSubIns({
        uname: this.$store.getters.name,
        inscode: this.$store.getters.inscode,
        insname: this.ruleform.insname,
        // this.$store.getters.inscode
      }).then((res) => {
        if (res.code == 0) {
          if (res.data && res.data.length > 0) {
            res.data.forEach((el) => {
              el.labelText = el.inscode + "-" + el.insname;
            });
            this.treeData = res.data;
            this.hospitalInfo = res.data[0];
          }
          this.loading = false;
        }
      });
    },
    addRole() {
      this.hospitalForm.hospitalName = "";
      this.hospitalForm.hospitalCode = "";
      this.hospitalForm.fatherAudit = "";
      if (this.patientCode) {
        this.roleVisible = true;
      } else {
        ElMessage({
          message: "请选择上级机构",
          type: "warning",
        });
      }
    },
    handleNodeClick(data) {
      this.hospitalInfo = data;
      this.hospitalForm.upHospital = data.insname;
      this.patientCode = data.inscode;
      data.children = [];
      getSubIns({
        uname: this.$store.getters.name,
        inscode: this.$store.getters.inscode,
        subins: data.inscode,
      }).then((res) => {
        if (res.code == 0) {
          if (res.data && res.data.length > 0) {
            res.data.forEach((el) => {
              res.data.forEach((el) => {
                el.labelText = el.inscode + "-" + el.insname;
              });
              let newChild = {
                children: [],
                ...el,
              };
              data.children.push(newChild);
            });
          }
        }
      });
    },
    submit() {
      let fatherAudit = "";
      if (this.$refs.hosAudit.getCheckedNodes()) {
        fatherAudit = this.$refs.hosAudit.getCheckedNodes().value;
      }
      let data = {
        insname: this.hospitalForm.hospitalName,
        inscode: this.hospitalForm.hospitalCode,
        insid: this.hospitalForm.hospitalCode,
        instype: 0,
        instel: this.hospitalForm.tel,
        insaddr: this.hospitalForm.address,
        fatherAudit: fatherAudit,
      };
      AddInsWeb({
        uname: this.$store.getters.name,
        inscode: this.$store.getters.inscode,
        fatherins: this.patientCode,
        data: JSON.stringify(data),
      }).then((res) => {
        if (res.code == 0) {
          this.roleVisible = false;
          this.patientCode = "";
          ElMessage({
            message: "新增成功",
            type: "success",
          });
          this.getHospital();
        } else {
          ElMessage({
            message: res.error,
            type: "error",
          });
        }
      });
    },
    save() {
      let data = {
        ctime: this.hospitalInfo.ctime,
        gwins: this.hospitalInfo.gwins,
        insaddr: this.hospitalInfo.insaddr,
        inscode: this.hospitalInfo.inscode,
        insid: this.hospitalInfo.insid,
        insinfo: this.hospitalInfo.insinfo,
        insl1: this.hospitalInfo.insl1,
        insl2: this.hospitalInfo.insl2,
        insl3: this.hospitalInfo.insl3,
        insl4: this.hospitalInfo.insl4,
        insl5: this.hospitalInfo.insl5,
        insl6: this.hospitalInfo.insl6,
        insname: this.hospitalInfo.insname,
        instel: this.hospitalInfo.instel,
        instype: this.hospitalInfo.instype,
        ipflt: this.hospitalInfo.ipflt,
        lid: this.hospitalInfo.lid,
        reqtime: this.hospitalInfo.reqtime,
        uname: this.hospitalInfo.uname,
        unsamp: this.hospitalInfo.unsamp,
        upres: this.hospitalInfo.upres,
        uptype: this.hospitalInfo.uptype,
        upurl: this.hospitalInfo.upurl,
        utel: this.hospitalInfo.utel,
      };
      AddInsWeb({
        uname: this.$store.getters.name,
        inscode: this.$store.getters.inscode,
        fatherins: "",
        data: JSON.stringify(data),
      }).then((res) => {
        if (res.code == 0) {
          this.patientCode = "";
          ElMessage({
            message: "保存成功",
            type: "success",
          });
          this.getHospital();
        }
      });
    },
    deleteHos() {
      ElMessageBox.confirm("是否删除改机构?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteIns({
            uname: this.$store.getters.name,
            inscode: this.$store.getters.inscode,
            delins: this.patientCode,
          }).then((res) => {
            if (res.code == 0) {
              this.patientCode = "";
              ElMessage({
                message: "删除",
                type: "success",
              });
              this.getHospital();
            }
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>